@import './../../assert/stylus/cube/variable.styl'
@import './../../assert/stylus/variable.styl'
@import './../../assert/stylus/mixin.styl'
.header-detail
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  overflow auto
  opacity 0
  color: $color-white
  background: $color-background-s
  z-index 3
  .detail-close
    position: absolute
    bottom: 0
    left: 50%
    transform: translateX(-15px)
    width: 30px
    height: 30px
    clear: both
    font-size: $fontsize-large-xxxx
    margin-bottom: 10px
&.fade-enter
  opacity: 0
  background: $color-background-s
&.fade-enter-active
  transition: opacity 0.3s ease-in
  opacity: 1
&.fade-enter-done
  opacity: 1
&.fade-exit
  opacity: 1
  background: $color-background-s
&.fade-exit-active
  transition: opacity 0.3s ease-in
  opacity: 0
&.fade-exit-done
  opacity: 0
.detail-wrapper
  display: inline-block
  width: 100%
  min-height: 100%
  .detail-main
    margin-top: 64px
    margin-bottom: 64px
    .name
      line-height: 16px
      text-align: center
      font-size: $fontsize-large
      font-weight: 700
    .star-wrapper
      margin-top: 18px
      padding: 2px 0
      text-align: center
    .title
      display: flex
      width 80%
      margin 28px auto 24px auto
      .line
        flex 1
        position: relative;
        top -6px
        border-bottom 1px solid rgba(255, 255, 255, 0.2)
      .text
        padding 0 12px
        font-weight: 700
        font-size: $fontsize-medium
    .supports
      width: 80%
      margin: 0 auto
      .support-item
        display: flex
        align-items: center
        padding: 0 12px
        margin-bottom: 12px
        .support-ico
          margin-right: 6px
        .text
          line-height: 16px
          font-size: $fontsize-small
    .bulletin
      width: 80%
      margin: 0 auto
      .content
        padding: 0 12px
        line-height: 24px
        font-size: $fontsize-small